<template>
  <div class="about">
    <!-- 用户名和密码登录 -->
    <div v-show="loginType">
      <van-form @submit="onSubmit" ref="loginRef">
        <van-field
          v-model="userInfo.username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="userInfo.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
    <!-- 邮箱登录登录 -->
    <div v-show="!loginType">
      <van-form @submit="emailLogin">
        <van-field
          v-model="userInfo.email"
          name="邮箱"
          label="邮箱"
          placeholder="请输入邮箱"
          :rules="[{ required: true, message: '您还未填写邮箱' }]"
        />
        <van-field
          v-model="userInfo.ruleCode"
          name="验证码"
          label="验证码"
          placeholder="请输入验证"
          :rules="[{ required: true, message: '您还未填写验证码' }]"
        >
          <template #button>
            <van-button size="small" type="primary" @click.stop="sendRuleCode"
              >发送验证码</van-button
            >
          </template>
        </van-field>
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>

    <div style="margin: 16px">
      <van-button
        class="email-btn"
        round
        block
        type="info"
        @click="changeLoginType"
        >{{ loginType ? "邮箱登录" : "用户名登录" }}</van-button
      >
    </div>
  </div>
</template>

<script>
import { Notify } from "vant";
import { apiLogin, apiGetEmailRuleCode, apiEmailLogin } from "@/api";
import Cookie from "js-cookie";
export default {
  data() {
    return {
      toPath: "", // 记录进入login页面的来源
      userInfo: {},
      loginType: true,
    };
  },
  created() {
    // 记录历史记录
    this.toPath = this.$route.query.toPath;

    if (this.toPath) {
      Notify({ type: "danger", message: "您还未登录！请先登录！！！" });
    }
  },
  // 当前页面所有的方法
  methods: {
    // 用户名和密码提交登录
    onSubmit() {
      apiLogin(this.userInfo).then((res) => {
        Notify({ type: "success", message: res.msg });

        // 保存token
        Cookie.set("token", res.token);

        // 判断toPath中是否有内容
        this.$router.push(this.toPath || "/main");
      });
    },
    // 邮箱提交登录
    emailLogin() {
      apiEmailLogin(this.userInfo).then((res) => {
        Notify({ type: "success", message: res.msg });

        // 保存token
        Cookie.set("token", res.token);

        // 判断toPath中是否有内容
        this.$router.push(this.toPath || "/main");
      });
    },
    // 更改登录方式
    changeLoginType() {
      this.loginType = !this.loginType;
    },
    // 发送验证码
    sendRuleCode() {
      // 直返返回false 终止防止继续执行
      if (!this.userInfo.email) return false;

      apiGetEmailRuleCode({ email: this.userInfo.email }).then((res) => {
        // 保存jwtcode
        this.userInfo = {
          ...this.userInfo,
          jwtCode: res.jwtCode,
        };
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.email-btn {
  margin-top: 10px;
}
</style>
